<template>
	<view>
		<view class="" v-if="isRender">
			<view class="progress">{{info.status_text}}</view>
			<view class="section">
				<view class="address" @click="openLocation()"><u-icon class="icon" name="map-fill"></u-icon><view class="value">{{info.address_name}}{{info.address}}</view> <u-icon class="right" name="arrow-right"></u-icon></view>
				<view class="images">
					<image class="li" mode="aspectFill" @click="previewImage(i)" v-for="(img,i) in info.images_array" :src="img"></image>
					<video class="li" v-if="info.video.length > 0" :src="info.video"></video>
				</view>
				<view class="content">{{info.content}}</view>
				<view class="cell"><view class="cell__tit">所属分类：</view><view class="cell__val">{{info.category_title}}</view></view>
				<view class="cell"><view class="cell__tit">上报时间：</view><view class="cell__val">{{info.createtime_text}}</view></view>
				<view class="cell"><view class="cell__tit">是否公开：</view><view class="cell__val">{{info.isopen_text}}</view></view>
				<view class="cell"><view class="cell__tit">审核时间：</view><view class="cell__val">{{info.reviewtime_text}}</view></view>
				<view class="cell"><view class="cell__tit">赠送积分：</view><view class="cell__val">{{info.score}}</view></view>
				<block v-if="info.solvetime > 0">
					<view class="cell"><view class="cell__tit">处理回复：</view></view>
					<view class="reply"><u-parse :html="info.solve_reply"></u-parse></view>
				</block>
				<block v-if="info.status == '-1'">
					<view class="cell"><view class="cell__tit">拒绝原因：</view></view>
					<view class="reply"><u-parse :html="info.review_reply"></u-parse></view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					info: null,
					isRender:false
				}
			},
			onLoad(options) {
				let that = this;
				this.$u.api.getReportDetail({id:options.id}).then(res=>{
					that.info = res.data;
					that.isRender = true;
				});
				setTimeout(() => {
								this.loading = false;
							}, 2000)
			},
			methods: {
				previewImage:function(i){
				    uni.previewImage({
				        urls: this.info.images_array,
				        current:i
				    });
				},
				openLocation:function(){
					console.log('打开地图');
					uni.openLocation({
					            latitude: parseFloat(this.info.lat),
					            longitude: parseFloat(this.info.lng),
								name:this.info.address_name,
								address:this.info.address,
					            success: function () {
					                console.log('openLocation success');
					            },fail:function(error){
									uni.showToast({
										title:error,
										duration:2000
										
									});
								}
					        });
				}
				
			},
			
		}
</script>

<style>
	page{
		
		background-color: #f4f4f4;
		padding-bottom: 30rpx;
	}
	.progress{
		background-color: #2196F3;
		padding:50rpx 50rpx 150rpx 50rpx;
		font-size: 48rpx;
		color:#ffffff;
	}
	.section{
		margin:0 auto;
		width:calc(100% - 100rpx);
		border-radius: 20rpx;
		background-color: #ffffff;
		margin-top:-100rpx;
	}
	.address{
		padding:30rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx dashed #eeeeee;
		
	}
	.address:active{
		opacity: 0.6;
	}
	.address .icon{
		margin-right:10rpx;
	}
	.address .right{
		margin-left:auto;
	}
	.address .value{
		display: -webkit-box;
		     overflow: hidden;
		     text-overflow: ellipsis;
		     -webkit-line-clamp: 1;
		     -webkit-box-orient: vertical;
			 background-color: #ffffff;
			 border-top-left-radius: 20rpx;
			 border-top-right-radius: 20rpx;
	}
	.images{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding:30rpx;
	}
	.images .li{
		width:180rpx;
		height:180rpx;
		margin:0;
		padding:0;
		margin-right:10rpx;
		margin-bottom:10rpx;
	}
	
	.images .li:nth-child(3n){
		margin-right: 0;
	}
	.content{
		padding:0 30rpx 30rpx 30rpx;
	}
	.cell{
		padding:20rpx 30rpx;
		display: flex;
		align-items: center;
	}
	.cell .cell__tit{
		color:#777777;
		
	}
	.cell .cell__val{
		color:#444444;
	}
	.reply{
		padding:20rpx 30rpx;
	}
</style>
